<template>
	<homepage>
    <li class="menuItem" 
    :class="{'menuItem-active':active===index}"
    v-for="(menuitem,index) in current"
    @click="$router.push({name:menuitem.name})"
    >
      <span class="truncate">{{menuitem.key}}</span>
      <div v-if="menuitem">
        <span class="item" v-for="(name,item) in menuitem.value"
        @click="$router.push({name})"
        >{{item}}</span>
      </div>
    </li>
   <!-- <li class="menuItem" :class="{'menuItem-active':active===1}">
      <span>比赛管理</span>
      <div>
        <span class="item" v-for="(name,item) in current[1]"
        @click="$router.push({name})"
        >{{item}}</span>
      </div>
    </li>
    <li class="menuItem" :class="{'menuItem-active':active===2}">
      <span>统计面板</span>
      <div>
        <span class="item" v-for="(name,item) in current[2]"
        @click="$router.push({name})"
        >{{item}}</span>
      </div>
    </li>
    <li class="menuItem" :class="{'menuItem-active':active===3}">
      <span>功能面板</span>
      <div>
        <span class="item" v-for="(name,item) in current[3]"
        @click="$router.push({name})"
        >{{item}}</span>
      </div>
    </li>
    <li class="menuItem" :class="{'menuItem-active':active===4}"><span>帮助</span></li>
    <li class="menuItem" :class="{'menuItem-active':active===5}">
      <span>...</span>
      <div>
        <span class="item">bug申报</span>
        <span class="item">功能建议</span>
      </div>
    </li> -->
  </homepage>
</template>

<script>
import { mapGetters,mapActions } from 'vuex'
import homepage from '@/views/HomePage.vue'
export default {
  data(){
    return{
      current:[
        {key:'概览',name:'htindex'},
        {key:'比赛管理',value:{
          '赛事管理':'htcpset',
          '往期赛事':'htcphis',
          '添加赛事':'htcpadd',
          '回收站':'htcprecy',
        }},
        {key:'统计面板',value:{
          '报名走势可视化':'ctSignUpTrend',
          '人员信息可视化':'ctPersonalInformation',
          '成绩分析可视化':'ctAchievementAnalysis',
          '其他可视化':'ctOtherVisualizations'
        }},
        {key:'功能面板',value:{
          '功能1':'',
          '功能2':'',
          '功能3':'',
          '功能4':''
        }},
        {key:'帮助',name:''},
        {key:'...',value:{
          'bug申报':'',
          '功能建议':'',
        }}
      ]
    }
  },
  components:{homepage},
  computed:{
    active(){ 
      const { name } = this.$route
      return this.current.map(e=>{
        if(e.name) return {'0':e.name}
        return e.value
      }).findIndex(e=>
        Object.values(e).includes(name)
      )
    },    
  }
}
</script>

	<!-- <div id="adminpage">
    
		<el-container
		style="height: calc(100% - 61px);"
		>
		  <el-aside width="20%"
      :style="{backgroundColor:bgcolor}"
			>
				<el-menu
				:uniqueOpened="true"
				:default-active="defaultActive"
				class="el-menu-vertical-demo"
				@select="select"
				:background-color="bgcolor"
				:text-color="color? '#fff':''"
				:active-text-color="color? '#ffd04b':''"
				>
					<el-submenu index="1">
						<template #title>
							<i class="el-icon-s-custom"></i>
							<span>用户管理</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="/admin/addU"
							@click="$router.push('/admin/addU');"
							>添加用户</el-menu-item>
							<el-menu-item index="/admin/setU"
							@click="$router.push('/admin/setU');"
							>编辑用户</el-menu-item>
							<el-menu-item index="/admin/recyclingU"
							@click="$router.push('/admin/recyclingU');"
							>回收站</el-menu-item>
							<el-menu-item index="/admin/index">index:1-4</el-menu-item>
						</el-menu-item-group>
					</el-submenu>
					
					<el-submenu index="2">
						<template #title>
							<i class="el-icon-s-flag"></i>
							<span>比赛管理</span>
						</template>
						<el-menu-item-group>
							<el-menu-item index="/admin/setC"
							@click="$router.push('/admin/setC');"
							>赛事管理</el-menu-item>
							<el-menu-item index="/admin/hisC"
							@click="$router.push('/admin/hisC');"
							>往期赛事</el-menu-item>
							<el-menu-item index="/admin/addC"
							@click="$router.push('/admin/addC');"
							>添加赛事</el-menu-item>
							<el-menu-item index="/admin/recyclingC"
							@click="$router.push('/admin/recyclingC');"
							>回收站</el-menu-item>
							
						</el-menu-item-group>
					</el-submenu>
					
          <el-submenu index="4">
          	<template #title>
          		<i class="el-icon-s-marketing"></i>
          		<span>可视化分析</span>
          	</template>
          	<el-menu-item-group>
          		<el-menu-item 
              v-for="i in 4"
              :index="`/admin/charts/${i}`"
          		@click="$router.push(`/admin/charts/${i}`);"
          		>charts—{{i}}</el-menu-item>
          	</el-menu-item-group>
          </el-submenu>
          
          <el-menu-item index="3" @click="toHome()">
					  	<i class="el-icon-s-promotion"></i>
					  	<template #title>返回客户端</template>
					</el-menu-item>
					
				</el-menu>
			</el-aside>
		    <el-main :style="{backgroundColor:bgcolor}" :class="color? 'main-evening':' '">
				<router-view 
				:showMain="showMain"
				@changeMain="change"
				@changeColor="color = !color"
				></router-view>
			</el-main>
		  </el-container>
	</div> --><!-- 
<style lang="scss">
#adminpage{
	height: 100% ;
	#admin-title{
		margin-bottom: 1px;
		> .el-button{
			height: 60px;
			width: 20%;
			position: absolute;
		}
		> span{
			padding-left: 21%;
			padding-right: 15%;
			font-size: 60px;
			line-height: 60px;
			font-family: 'Dancing Script', cursive;
			color: #FFFFFF;
			text-shadow: 1px 1px #26A2FF,
						 -1px -1px #26A2FF, 
						 1px -1px #26A2FF, 
						 -1px 1px #26A2FF;
		}
		.el-switch{
			height: 60px;
			position: absolute;
			right: 2%;
		}
		
	}
	.el-container{
		// border: 3px solid blue;
	}
	.el-aside{
		border-right: solid 1px #e6e6e6;
		.el-menu{
			border-right: none;
		}
	}
	.el-main{
		overflow-y: scroll;
		
	}
	//夜间模式class
	.main-evening{
		*:not(input,i){
			
			button,
			tr,
			th,
			.text,
			.el-table__empty-block,
			label{
				color: #ffffff !important;
				background-color: rgb(84, 92, 100);;
				i,
				span:not(.el-tag),
				{
					color: #ffffff;
				}
			}
			.hover-row{
				*{
					background: rgb(65, 71, 77);
				}
			}
			.cpttsetshow{
				:not(.el-tag){
					color: #ffffff;
				}
				.el-drawer__body{
					background: rgb(65, 71, 77);
				}
			}
		}
		i{
			color: #000000;
		}
	}
}
.ye-btn{
	background-color: rgb(84, 92, 100) !important;
	color: #ffffff !important;
}
</style>
 -->